<style>
    .warranty-image-wrapper{
        display: flex;
        flex-wrap: wrap;
    }
    .warranty-image-wrapper .warranty-image-list{
        display: flex;
        flex-wrap: wrap;
    }
    .warranty-image-wrapper .warranty-image-list .item{
        width: 100px;
        flex: 0 0 100px;
        height: 100px;
        padding: 0;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: block;
        position: relative;
    }
    .warranty-image-wrapper .warranty-image-list .item{
        margin: 10px;
    }
    .warranty-image-wrapper .warranty-image-list .item img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .warranty-image-wrapper .warranty-image-list .item .x-close {
        font-size: 16px;
        position: absolute;
        top: 4px;
        right: 4px;
        z-index: 99;
        font-weight: lighter;
        text-shadow: none;
        display: block;
        cursor: pointer;
    }
    .warranty-image-wrapper .warranty-image-list .item .x-close:hover{
        color: #f00;
    }
    .warranty-image-wrapper .add{
        width: 100px;
        flex: 0 0 100px;
        height: 100px;
        padding: 0;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        border: 1px solid #eee;
        cursor: pointer;
        position: relative;
        margin: 10px;
    }

    .warranty-image-wrapper .add .open{
        font-size: 64px;
        line-height: 1em;
        color: #666;
    }
    .warranty-image-wrapper .add .upload-image{
        display: block;
        position: absolute;
        opacity: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
        z-index: 29;
    }
</style>
<div class="warranty-image-wrapper" id="warrantyImageWrapper">
    <div class="warranty-image-list">
        @empty(old('images'))
            @foreach($images as $v)
                {{--<div class="item" href="{{ getInstallPicture($v->image_src) }}" style="background-image: url('{{ getInstallPicture($v->image_src) }}')"></div>--}}
                <div class="item">
                    <input type="text" hidden name="images[]" value="{{ @$v->image_src }}">
                    <img src="{{ getInstallPicture(@$v->image_src) }}">
                    <i class="fa fa-trash-o x-close"></i>
                </div>
            @endforeach
        @else
            @foreach(old('images') as $v)
                {{--<div class="item" href="{{ getInstallPicture($v->image_src) }}" style="background-image: url('{{ getInstallPicture($v->image_src) }}')"></div>--}}
                <div class="item">
                    <input type="text" hidden name="images[]" value="{{ @$v }}">
                    <img src="{{ getInstallPicture(@$v) }}">
                    <i class="fa fa-trash-o x-close"></i>
                </div>
            @endforeach
        @endif

    </div>
    <div class="add">
        <i class="fa fa-plus open"></i>
        <input type="file" name="file" class="upload-image" accept="image/*">
    </div>
</div>
<template id="WarrantyImageItem">
    <div class="item">
        <input type="text" hidden value="" name="images[]">
        <img src="{{ getInstallPicture(@$v->image_src) }}">
        <i class="fa fa-trash-o x-close"></i>
    </div>
</template>